/**
 * @Author:高志斐
 * @Date:2020/7/6
 * @Description:这是钱包充值提现记录页面
 */
import React,{Component} from "react";
import {Button, Icon, NavBar, WhiteSpace,List} from "antd-mobile";
import axios from 'axios';
import {URL} from "../../index";
import {getCookieId} from "../Login/Component_Login/GetCookie";
const Item = List.Item;
const Brief = Item.Brief;
export default class WalletRecord extends Component{
    constructor(props) {
        super(props);
        this.state = {
            walletRecords:[],//json表名
            disabled: false,
        }
        this.loadData = this.loadData.bind(this)
        this.numberToString = this.numberToString.bind(this)
    }
    //加载充值提现记录的函数
    loadData(){
        axios({
            method:"GET",
            url:URL + "/tradeRecord/tradeRecordListsOfBank",
            params:{
                userId:getCookieId()
            }
        }).then(res=>{
            this.setState({
                walletRecords:this.state.walletRecords.concat(res.data.tradeRecordsOfBank)
            })
        }).catch(error =>{
            console.log(error)
        })
    }
    componentDidMount() {
        this.loadData()
    }
    // 将获取到的交易类型转换为文字，0对应提现，1对应充值
    numberToString(num){
        num =Number(num);
        if(num===5){
            return "提现"
        }else if(num===6){
            return "充值"
        }else{
            console.log(num)
        }
    };

    render() {
        return(
            <div>
                <NavBar
                    mode="light"
                    icon={<Icon type="left" style={{color:"#f8a83f"}}/>}
                    onLeftClick={
                        ()=> {this.props.history.push('/wallet')}
                        // window.history.back(-1)
                    }
                >钱包明细记录
                </NavBar>
                <List className="my-list">
                    {(()=>{return this.state.walletRecords.map((item,index)=>{
                        return(
                            <Item multipleLine extra={
                                <div>
                                    <p style={{marginBottom:13,fontSize:"18px",color:"red"}}>{item.tradeAmoount+"元"}</p>
                                    <p style={{color:"#f8a83f",fontSize:"18px"}}>{this.numberToString(item.tradeCategory)}</p>
                                </div>
                            }>
                                {/*{item.bankName+' (尾号'+item.bankAccountCard.substring(item.bankAccountCard.length-4,item.bankAccountCard.length)+')'}*/}
                                {item.bankName+' (尾号1234)'}
                                <Brief>
                                    {<div>
                                        <p>{"时间："+item.gmtModified}</p>
                                        <p>{"订单编号："+item.logicId}</p>
                                    </div>}
                                </Brief>
                            </Item>
                        )
                    })
                    })()}
                </List>
            </div>
        );
    }
}
